// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

.js {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes pop-in {
            0% {
                opacity: 0;
                transform: scale(0);
            }

            35% {
                opacity: 1;
                transform: scale(0.2);
            }

            50% {
                transform: scale(0.5);
            }

            65% {
                transform: scale(0.7);
            }

            80% {
                transform: scale(0.9);
            }

            90% {
                transform: scale(1.1);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes slide-in {
            0% {
                opacity: 0;
                right: -50%;
            }

            100% {
                opacity: 1;
                right: 0;
            }
        }
    }

    .animate-pop-in {
        animation: 0.5s ease-out 0s 1 normal forwards running pop-in;
    }

    .animate-slide-in {
        animation: 0.5s ease-out 0s 1 normal forwards running slide-in;
    }
}

.c-slide-in-container {
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    [data-animation="pop-in"],
    [data-animation="dependent-pop-in"] {
        opacity: 0;
    }

    [data-animation="slide-in"] {
        position: relative;
        opacity: 0;
    }
}

// Make sure content is visible of JS fails
html.no-js {
    [data-animation="pop-in"],
    [data-animation="dependent-pop-in"] {
        opacity: 1;
    }

    [data-animation="slide-in"] {
        position: static;
        opacity: 1;
    }
}
